<template>
  <layout>
    <template #moduleContent>
      <div class="dashboard-handoff left" v-if="!isUltraWide">
        <handoff v-for="item in module.left" :key="item.id" :list="item" type="left" :id="item.id" />
      </div>
      <div class="dashboard-handoff right" v-if="!isUltraWide">
        <handoff v-for="item in module.right" :key="item.id" :list="item" type="right" :id="item.id" />
      </div>
      <DialogContainer class="dialog-container" v-if="isUltraWide" />
      <big v-if="isUltraWide"></big>
      <mid v-else></mid>
      <div :class="['atlas-container', { 'atlas-container-retract': !retract }]">
        <hy-atlas></hy-atlas>
      </div>
      <legend-mark :legend="legendData.earlyWarning" :retract="retract" />
      <ToggleMapMode :class="['ToggleMapMode-box', { 'ToggleMapMode-box-retract': !retract }]" is-show-early-warning />
    </template>
  </layout>
</template>

<script setup lang="ts">
import layout from '@/gasLayout/index.vue';
import big from './big/index.vue';
import mid from './mid/index.vue';
import { useIsUltraWideScreen } from '@/hooks/useIsUltraWideScreen';
import DialogContainer from '@/components/DialogContainer/index.vue';
import { useGeneral } from '@/hooks/useGeneral';
import { module } from '@/constants/components/cards';
import hyAtlas from '@/components/atlas/index.vue';
import legendData from '@/utils/legend/legendData';
import ToggleMapMode from '@/components/ToggleMapMode/index.vue';
import legendMark from '@/components/legend/index.vue';
import { useLayoutStore } from '@/store/modules/layout';

const { retract } = useGeneral();
const { isUltraWide } = useIsUltraWideScreen();
const layoutStore = useLayoutStore();
onMounted(() => {
  layoutStore.resetData();
  // 初始化左右两边
  layoutStore.initModuleData(module.left[0], true, false);
  // 或者只初始化右边
  layoutStore.initModuleData(module.right[0], false, true);
});
</script>

<style lang="scss" scoped>
.dialog-container {
  position: absolute;
  top: 15%;
  left: 30%;
  z-index: 5;
}

.atlas-container {
  z-index: 4;
  position: absolute;
  left: 26.4%;
  top: 12% !important;

  &-retract {
    left: 1%;
  }
}

.dashboard-handoff {
  z-index: 4;
  position: absolute;
  top: 1%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  &.left {
    left: 3%;
  }

  &.right {
    right: 3%;
  }
}
.ToggleMapMode-box {
  position: absolute;
  right: 26.7%;
  bottom: 15%;
  z-index: 4;

  &-retract {
    right: 2.7% !important;
  }
}
@media (min-width: 3840px) {
  .ToggleMapMode-box {
    right: 25.8% !important;

    &-retract {
      right: 1.85% !important;
    }
  }
}
</style>
